.relation-graph {
    box-sizing:border-box;
    position: relative;
    /*****************************[graph]****************************************/
    .rel-map {
        svg.rg-icon {
            height: 100%;
            width: 100%;
        }
    }
    .rel-background {
        position: absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
    .rel-watermark {
        position: absolute;
        z-index: 1200;
        overflow: visible;
        min-height: 100px;
        min-width: 100px;
        height: var(--mv-height);
        width: var(--mv-width);
        box-sizing: border-box;
        div {
            box-sizing: border-box;
        }
    }
    .rel-watermark.rel-watermark-top {
        left: calc((100% - var(--mv-width)) / 2);
        top: 10px;
    }
    .rel-watermark.rel-watermark-bottom {
        left: calc((100% - var(--mv-width)) / 2);
        bottom: 10px;
    }
    .rel-watermark.rel-watermark-left {
        left: 10px;
        top: calc((100% - var(--mv-height)) / 2);
    }
    .rel-watermark.rel-watermark-right {
        right: 10px;
        top: calc((100% - var(--mv-height)) / 2);
    }
    .rel-watermark.rel-watermark-tl {
        left: 10px;
        top: 10px;
    }
    .rel-watermark.rel-watermark-tr {
        right: 10px;
        top: 10px;
    }
    .rel-watermark.rel-watermark-bl {
        left: 10px;
        bottom: 10px;
    }
    .rel-watermark.rel-watermark-br {
        right: 10px;
        bottom: 10px;
    }
    .rel-lines-svg {
        overflow: visible;
        width:10px;
        height:10px;
        position:absolute;
        left:0px;
        top:0px;
    }
    .rel-linediv {
        /*user-select: none;*/
        overflow: visible;
        position: absolute;
        z-index: 40;
        width: 100%;
        top: 0px;
        left: 0px;
        --stroke: url('#lineStyle');
        --markerEnd: url('#arrow-default');
        --markerStart: url('#start-arrow-default');
        --markerEndChecked: url('#arrow-checked');
        --markerStartChecked: url('#start-arrow-checked');
        pointer-events: none;
    }
    .rel-linediv svg {
        overflow: visible
    }
    .rel-linediv-el-lines {
        z-index: 80;
        pointer-events: none;
        .c-rg-line-bg {
            pointer-events: all;
        }
        .c-rg-line-text {
            pointer-events: all;
        }
    }
    .rel-lines-svg-el-lines {
        overflow: visible;
        width:10px;
        height:10px;
        position:absolute;
        left:0px;
        top:0px;
    }
    .rel-link-peel {
        pointer-events: auto;
    }

    /*****************************[canvas]****************************************/
    .rel-map {
        background-color: #ffffff;
        /*background-image: url("/static/images/graph-bg.png");*/
        overflow: hidden;
        cursor: default;
        user-select: none;
        opacity: 0.01;
        transition: none;
    }
    .rel-map-ready {
        opacity: 1;
        transition: opacity 0.5s ease;
    }
    .rel-map-background-norepeat {
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    .rel-nodediv-for-webkit {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 50;
    }

    .rel-map-canvas {
        position: relative;
        top: 0px;
        left: 0px;
        /*overflow:hidden;*/
        border: 0px;
        z-index: 3;
        /*background-color: #efefef;*/
        /*border-top: #efefef dashed 1px;*/
        /*border-left: #efefef dashed 1px;*/
        /*width:30px;*/
        /*height:30px;*/
        overflow: visible;
    }
    .rel-canvas-slot{
        overflow: visible;
        position: absolute;
        margin-top: 0px;
        margin-left: 0px;
    }
    .rel-canvas-slot-behind {
        z-index: 30;
        overflow: visible;
    }
    .rel-canvas-slot-above {
        z-index: 70;
        overflow: visible;
    }
    .rel-map ::v-deep img {
        -webkit-user-drag: none;
        -webkit-user-select: none;
    }

    /*****************************[line]****************************************/
    .c-rg-line-text {
        fill: #888888;
        font-size: 12px;
        paint-order: stroke;
    }
    .c-rg-line-text-checked {
        //filter: drop-shadow(1px 1px 3px rgba(253, 139, 55, 1));
        stroke: rgba(253, 139, 55, 0.3);
        stroke-width: 2;
    }
    .c-rg-line {
        //z-index: 1000;
        fill-rule: nonzero;
        stroke-linecap: round;
        /*marker-end: url('#arrow');*/
        /* firefox bug fix - won't rotate at 90deg angles */
        /*-moz-transform: rotate(-89deg) translateX(-190px);*/
        /*animation-timing-function:linear;*/
        /*animation: ACTRGLineInit 1s;*/
    }
    .c-rg-line-bg {
        stroke: #ffffff;
        opacity: 0.01;
        fill: none;
        fill-rule: nonzero;
        stroke-linecap: round;
    }
    .rg-line-dashtype-1 {
        stroke-dasharray: 2, 2, 2;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-2 {
        stroke-dasharray: 5, 5, 5;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-3 {
        stroke-dasharray: 9, 9, 9;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-4 {
        stroke-dasharray: 5, 5, 15;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    @keyframes ACTRGLineChecked {
        0% {
            stroke-dashoffset: 352px;
            stroke-dasharray: 5, 5, 5;
        }
        50% {
            stroke-dasharray: 5, 5, 5;
            stroke-dashoffset: 3px;
        }
        100% {
            stroke-dashoffset: 352px;
            stroke-dasharray: 5, 5, 5;
        }
    }
    @keyframes rg-line-anm1 {
        0% {
            stroke-dashoffset: 100px;
            stroke-dasharray: 5, 5, 5;
        }
        100% {
            stroke-dasharray: 5, 5, 5;
            stroke-dashoffset: 3px;
        }
    }
    @keyframes rg-line-anm2 {
        from {
            stroke-dashoffset: 0;
            stroke-dasharray: 4, 4, 4;
        }
        to {
            stroke-dashoffset: 10px;
            stroke-dasharray: 20, 20, 20;
        }
    }
    @keyframes rg-line-anm3 {
        0% {
            stroke-opacity: 1;
        }
        50% {
            stroke-opacity: 0.2;
        }
        100% {
            stroke-opacity: 1;
        }
    }
    @keyframes rg-line-anm4 {
        0% {
            stroke-dasharray: 0, 100%;
        }
        100% {
            stroke-dasharray: 100%, 0;
        }
    }

    .rg-line-anm-1 {
        animation: rg-line-anm1 10s infinite;
    }

    .rg-line-anm-2 {
        animation: rg-line-anm2 3s infinite;
    }

    .rg-line-anm-3 {
        animation: rg-line-anm3 1s infinite;
    }

    .rg-line-anm-4 {
        animation: rg-line-anm4 3s infinite;
    }

    .c-rg-line-checked {
        z-index: 100;
        /*stroke: var(--stroke);*/
        /*marker-end: var(--markerEndChecked) !important;*/
        /*stroke-width: 2px;*/
        /*stroke-dasharray: 5, 5, 5;*/
        /*stroke-dashoffset: 3px;*/
        /*stroke-linecap: butt;*/
        /*stroke: #FD8B37;*/
        /*stroke-linejoin: bevel;*/
        /* firefox bug fix - won't rotate at 90deg angles */
        /*-moz-transform: rotate(-89deg) translateX(-190px);*/
        //filter: drop-shadow(0px 0px 3px rgba(253, 139, 55, 1));
        //transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;
    }
    .c-rg-line-checked-bg{
        stroke: rgba(253, 139, 55,0.3);
        //stroke-width: 10px;
        stroke-linecap: round;
    }

    @keyframes deform1 {
        from {
            stroke-dashoffset: 0;
        }
        to {
            stroke-dashoffset: 100%;
        }
    }

    .c-rg-line-path {
        /*stroke: url("#gradient");*/
        /*mask: url("#line-mask");*/
    }

    /*****************************[node]****************************************/
    .rg-icon {
        width: 19px;
        height: 19px;
        vertical-align: 0px;
        fill: currentColor;
        overflow: hidden;
    }

    .el-icon-remove, .el-icon-circle-plus {
        cursor: pointer;
    }
    .relation-graph-node {
        position: absolute;
    }
    .rel-node-peel {
        padding: 8px;
        position: absolute;
        font-size: 14px;
        /*border:green solid 1px;*/
        box-sizing: border-box;
    }
    .rel-node-peel-checked{
        z-index: 100;
    }
    .rel-node {
        text-align: center;
        border-style: solid;
        border-width: 0px;
        box-sizing: border-box;
    }
    .rg-center-items {
        display: flex;
        place-items: center;
    }
    .rel-node-shape-0 {
        width: 80px;
        height: 80px;
        //display: flex;
        //place-items: center;
        border-radius: 50%;
    }
    .rel-node-shape-1 {
        /*border: #FD8B37 solid 1px;*/
        border-radius: 5px;
    }
    //& > * {
    //    font-family: Arial;
    //    font-size: 14px;
    //    color: black;
    //    padding:0px;
    //    margin:0px;
    //    &::before {
    //        content: none;
    //        display: block;
    //        background-color: blue;
    //        height: 20px;
    //        width: 20px;
    //        padding:0px;
    //        margin:0px;
    //    }
    //}
    img,svg,video,canvas,audio,iframe,embed,object {
        display: unset;
        vertical-align: unset;
    }
    .c-node-text {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0px;
    }
    .rel-node-shape-1 .c-node-text {
        /*border: #FD8B37 solid 1px;*/
        padding-left: 5px;
        padding-right: 5px;
    }

    .rel-node-type-button {
        border-radius: 25px;
        color: blue;
        cursor: pointer;
    }

    .rel-node-hover {
    }

    .rel-node-checked {
        //box-shadow: 0px 0px 10px #FD8B37;
        //animation: ACTRGNodeInit 1s linear;
        transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;
        //box-shadow: 0 0 0 8px rgba(234,100,217,0.3);
        box-shadow: 0 0 0 8px rgba(253, 139, 55,0.3);
    }
    .rel-node-dragging {
        z-index: 400;
    }
    .rel-node-selected {
        //border: #025098 solid 2px;
        //box-shadow: 0 0 0 2px rgba(253, 139, 55,0.3);
        box-shadow: 0 0 0 2px rgba(214, 3, 246, 0.8);
        border-radius: 5px;
        z-index: 400;
    }
    .rel-node-resize {
        //border: #025098 solid 2px;
    }
    .rel-editing-referline {
        position: absolute;
        z-index: 999;
        pointer-events: none;
        width: 100%;
        height: 100%;
        left:0px;
        top:0px;
        .rel-editing-referline-v {
            width: 16px;
            height: 100%;
            position: absolute;
            top:0px;
            display: flex;
            place-items: center;
            justify-content: center;
            transform: translate(-8px, 0px);
            border-top: rgba(214, 3, 246, 1) solid 2px;
            border-bottom: rgba(214, 3, 246, 1) solid 2px;
            .referline {
                width: 1px;
                height: 100%;
                border-left: rgba(214, 3, 246, 1) dashed 2px;
                display: flex;
                place-items: center;
                justify-content: center;
                font-size: 12px;
                & > div {
                    width: 70px;
                    height: 20px;
                    line-height: 20px;
                    background-color: rgba(214, 3, 246, 1);
                    text-align: center;
                    border-radius: 5px;
                    padding-left:5px;
                    padding-right:5px;
                    color: #ffffff;
                }
            }
        }
        .rel-editing-referline-h {
            height: 16px;
            width: 100%;
            position: absolute;
            left:0px;
            display: flex;
            place-items: center;
            justify-content: center;
            transform: translate(0px, -8px);
            border-left: rgba(214, 3, 246, 1) solid 2px;
            border-right: rgba(214, 3, 246, 1) solid 2px;
            .referline {
                height: 1px;
                width: 100%;
                border-top: rgba(214, 3, 246, 1) dashed 2px;
                display: flex;
                place-items: center;
                justify-content: center;
                font-size: 12px;
                & > div {
                    height: 20px;
                    line-height: 20px;
                    width: 70px;
                    background-color: rgba(214, 3, 246, 1);
                    text-align: center;
                    border-radius: 5px;
                    color: #ffffff;
                }
            }
        }
    }
    .rel-editing-line-ctrl {
        position: absolute;
        z-index: 500;
        pointer-events: none;
        width: 100%;
        height: 100%;
        left:0px;
        top:0px;
        .rel-line-ctrl-dot {
            pointer-events: auto;
            width: 10px;
            height: 10px;
            background-color: rgba(214, 3, 246, 1);
            box-shadow: 0 0 0 1px rgb(112, 2, 129);
            position: absolute;
            border-radius: 50%;
            cursor: move;
            z-index: 1;
        }
        .rel-line-ctrl-text {
            pointer-events: auto;
            background-color: rgba(214, 3, 246, 1);
            box-shadow: 0 0 0 1px rgb(112, 2, 129);
            position: absolute;
            border-radius: 3px;
            cursor: move;
            z-index: 1;
            font-size: 12px;
            line-height: 12px;
            white-space: nowrap;
            color: #ffffff;
            display: flex;
            place-items: center;
            justify-content: center;
            box-sizing: border-box;
            .rel-line-text-input {
                white-space: nowrap;
                pointer-events: auto;
                background-color: transparent;
                color: rgba(214, 3, 246, 1);
                border-radius: 3px;
                width: 100%;
                padding-left:5px;
                padding-right:5px;
                height: 100%;
                font-size: 12px;
                line-height: 100%;
                text-align: left;
                border-width: 0px;
                box-sizing: border-box;
            }
        }
        .rel-line-ctrl-text-editing {
            background-color: #faf191;
        }
    }
    .rel-editing-ctrl, .rel-editing-connect-ctrl {
        position: absolute;
        z-index: 500;
        box-shadow: 0 0 0 2px rgba(214, 3, 246, 0.8);
        border-radius: 0px;
        pointer-events: none;

    }
    .rel-editing-bar {
        user-select: none;
        pointer-events: none;
        position: absolute;
        border-radius: 5px;
        padding:3px;
        box-sizing: border-box;
        display: flex;
        place-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
        .rel-gee-icon {
            background-color: rgba(214, 3, 246, 0.5);
            pointer-events: auto;
            min-width: 20px;
            min-height: 20px;
            border-radius: 5px;
            box-sizing: border-box;
            display: flex;
            place-items: center;
            justify-content: center;
            cursor: pointer;
            &:hover {
                background-color: rgba(214, 3, 246, 1);
                color: #ffffff;
            }
        }
    }
    .rel-editing-line-handle {
        pointer-events: auto;
    }
    .rel-editing-bar-top {
        width: 110px;
        height: 30px;
        left: calc((100% - 110px) / 2);
        top: -40px;
    }
    .rel-editing-bar-bottom {
        width: 110px;
        height: 30px;
        left: calc((100% - 110px) / 2);
        bottom: -40px;
    }
    .rel-editing-bar-left {
        width: 30px;
        height: 110px;
        left: -40px;
        top: calc((100% - 110px) / 2);
    }
    .rel-editing-bar-right {
        width: 30px;
        height: 110px;
        right: -40px;
        top: calc((100% - 110px) / 2);
    }
    .rel-editing-bar-tl {
        width: 30px;
        height: 30px;
        right: calc(100% + 10px);
        top: -40px;
    }
    .rel-editing-bar-tr {
        width: 30px;
        height: 30px;
        left: calc(100% + 10px);
        top: -40px;
    }
    .rel-editing-bar-bl {
        width: 30px;
        height: 30px;
        right: calc(100% + 10px);
        bottom: -40px;
    }
    .rel-editing-bar-br {
        width: 30px;
        height: 30px;
        left: calc(100% + 10px);
        bottom: -40px;
    }
    .rel-resize-ctl {
        position: relative;
        height: 100%;
        width: 100%;
        .rel-resize-ctl-handler {
            pointer-events: auto;
            width: 10px;
            height: 10px;
            background-color: rgba(214, 3, 246, 1);
            border: #460172 solid 1px;
            position: absolute;
            border-radius: 50%;
        }
        .rel-resize-ctl-tl {
            cursor: nwse-resize;
            left: -7px;
            top: -7px;
        }
        .rel-resize-ctl-tr {
            cursor: nesw-resize;
            right: -7px;
            top: -7px;
        }
        .rel-resize-ctl-bl {
            cursor: nesw-resize;
            left: -7px;
            bottom: -7px;
        }
        .rel-resize-ctl-br {
            cursor: nwse-resize;
            right: -7px;
            bottom: -7px;
        }
        .rel-resize-ctl-t {
            cursor: n-resize;
            top: -7px;
            left: calc((100% - 12px) / 2);
        }
        .rel-resize-ctl-b {
            cursor: s-resize;
            bottom: -7px;
            left: calc((100% - 12px) / 2);
        }
        .rel-resize-ctl-l {
            cursor: w-resize;
            left: -7px;
            top: calc((100% - 12px) / 2);
        }
        .rel-resize-ctl-r {
            cursor: e-resize;
            right: -7px;
            top: calc((100% - 12px) / 2);
        }
    }
    .rel-editing-connect-ctrl {
        position: absolute;
        z-index: 1400;
        box-shadow: 0 0 0 2px rgba(239, 103, 5, 0.8);
        border-radius: 0px;
        pointer-events: none;
    }
    .rel-connect-ctl {
    }
    .rel-connect-ctl-handler {
        pointer-events: auto;
        background-color: rgba(239, 103, 5, 1);
        border: #723001 solid 1px;
        position: absolute;
        border-radius: 3px;
        z-index: 20;
        &:hover {
            background-color: #ffffff;
        }
    }
    .rel-connect-ctl-center {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: cell;
        top: calc((100% - 22px) / 2);
        left: calc((100% - 22px) / 2);
    }
    .rel-connect-ctl-t {
        width: 20px;
        height: 10px;
        cursor: cell;
        top: -7px;
        left: calc((100% - 22px) / 2);
    }
    .rel-connect-ctl-b {
        width: 20px;
        height: 10px;
        cursor: cell;
        bottom: -7px;
        left: calc((100% - 22px) / 2);
    }
    .rel-connect-ctl-l {
        width: 10px;
        height: 20px;
        cursor: cell;
        left: -7px;
        top: calc((100% - 22px) / 2);
    }
    .rel-connect-ctl-r {
        width: 10px;
        height: 20px;
        cursor: cell;
        right: -7px;
        top: calc((100% - 22px) / 2);
    }
    .rel-connect-ctl-lr {
        width: 100%;
        height: 20px;
        cursor: cell;
        right: 0px;
        top: calc((100% - 22px) / 2);
        z-index: 11;
        opacity: 0.7;
    }
    .rel-connect-ctl-tb {
        width: 20px;
        height: 100%;
        cursor: cell;
        top: 0px;
        left: calc((100% - 22px) / 2);
        z-index: 10;
        opacity: 0.7;
    }
    .rel-miniview {
        position: absolute;
        overflow: hidden;
        z-index: 1100;
        min-height: 100px;
        min-width: 100px;
        height: var(--mv-height);
        width: var(--mv-width);
        background-color: #ffffff;
        border: #cccccc solid 1px;
        border-radius: 5px;
        box-shadow: 1px 1px 4px 1px rgba(204, 204, 204, 0.55);
        display: flex;
        place-items: center;
        justify-content: center;
        background-color: #ffffff;
        canvas {
            background-color: #ffffff;
            border: #cccccc solid 1px;
            opacity: 0.7;
        }
        .rel-mv-canvas-reset {
            cursor: pointer;
            &:hover {
                background-color: rgba(187, 245, 71, 0.58);
            }
        }
        .rel-mv-visible-area {
            z-index: 2;
            position: absolute;
            border:rgba(214, 3, 246, 1) solid 1px;
            cursor: move;
            background-color: rgba(214, 3, 246, 0.3);;
            //transition: left 0.2s ease-in-out, top 0.2s ease-in-out;
        }
    }
    .rel-miniview.rel-miniview-top {
        left: calc((100% - var(--mv-width)) / 2);
        top: 10px;
    }
    .rel-miniview.rel-miniview-bottom {
        left: calc((100% - var(--mv-width)) / 2);
        bottom: 10px;
    }
    .rel-miniview.rel-miniview-left {
        left: 10px;
        top: calc((100% - var(--mv-height)) / 2);
    }
    .rel-miniview.rel-miniview-right {
        right: 10px;
        top: calc((100% - var(--mv-height)) / 2);
    }
    .rel-miniview.rel-miniview-tl {
        left: 10px;
        top: 10px;
    }
    .rel-miniview.rel-miniview-tr {
        right: 10px;
        top: 10px;
    }
    .rel-miniview.rel-miniview-bl {
        left: 10px;
        bottom: 10px;
    }
    .rel-miniview.rel-miniview-br {
        right: 10px;
        bottom: 10px;
    }
    .rel-node-flashing {
        animation: ACTRGNodeFlashing 2s infinite;
    }

    .rel-node-vtree-2 {
        transform-origin: 0 0; /* 设置旋转中心为左上角*/
        /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/
        transform: rotate(30deg) translateX(0px);
    }

    .rel-node-vtree {
        width: 130px;
        height: 45px;
        text-align: left;
    }

    .c-btn-open-close {
        position: absolute;
        height: 100%;
        width: 19px;
        /*border:red solid 1px;*/
        display: flex;
        align-items: center;
        justify-content: center;
        /*border:#ff0000 solid 1px;*/
        user-select: none;
        pointer-events: none;
        cursor: pointer;
    }

    .c-btn-open-close span {
        width: 19px;
        height: 19px;
        display: inline-block;
        text-align: center;
        border-radius: 15px;
        color: #ffffff;
        cursor: pointer;
        font-size: 19px;
        line-height: 16px;
        background-size: 100% 100%;
        pointer-events: all;
    }

    .c-expanded {
        background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310217820%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223373%22%20width=%2232%22%20height=%2232%22%3E%3Cpath%20d=%22M853.333333%20480H544V170.666667c0-17.066667-14.933333-32-32-32s-32%2014.933333-32%2032v309.333333H170.666667c-17.066667%200-32%2014.933333-32%2032s14.933333%2032%2032%2032h309.333333V853.333333c0%2017.066667%2014.933333%2032%2032%2032s32-14.933333%2032-32V544H853.333333c17.066667%200%2032-14.933333%2032-32s-14.933333-32-32-32z%22%20p-id=%223374%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
    }

    .c-collapsed {
        background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310454619%22%20class=%22icon%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223662%22%20width=%22128%22%20height=%22128%22%3E%3Cpath%20d=%22M853.333333%20554.666667H170.666667c-23.466667%200-42.666667-19.2-42.666667-42.666667s19.2-42.666667%2042.666667-42.666667h682.666666c23.466667%200%2042.666667%2019.2%2042.666667%2042.666667s-19.2%2042.666667-42.666667%2042.666667z%22%20p-id=%223663%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
    }

    .c-expand-positon-left {
        margin-top: -8px;
        margin-left: -25px;
    }

    .c-expand-positon-right {
        height: 100%;
        width: 100%;
        justify-content: center;
    }

    .c-expand-positon-right span {
        margin-top: -18px;
        margin-right: -18px;
        margin-left: 100%;
    }

    .c-expand-positon-bottom {
        height: 100%;
        width: 100%;
        margin-top: 7px;
        margin-left: -8px;
        align-items: flex-end;
        justify-content: center;
    }

    .c-expand-positon-top {
        height: 18px;
        width: 100%;
        margin-top: -20px;
        margin-left: -6px;
        align-items: flex-end;
        justify-content: center;
    }

    @keyframes ACTRGNodeInit {
        from {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        50% {
            box-shadow: 0px 0px 1px rgb(46, 78, 143);
        }
        100% {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        to {
            box-shadow: 0px 0px 15px #FD8B37;
        }
    }
    @keyframes ACTRGNodeFlashing {
        from {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        40% {
            box-shadow: 0px 0px 1px rgb(46, 78, 143);
        }
        70% {
            box-shadow: 0px 0px 8px #FD8B37;
        }
        100% {
            box-shadow: 0px 0px 0px #FD8B37;
        }
    }

    .rel-diy-node {
        padding: 0px;
    }

    /*****************************[debug]****************************************/
    .c-setting-panel {
        --height: 300px;
        --width: 200px;
        width: 300px;
        height: 200px;
        position: absolute;
        margin-left: 10px;
        margin-top: 5px;
        font-size: 12px;
        color: rgb(58, 91, 178);
        padding: 10px;
        overflow: hidden;
        box-shadow: 0px 0px 5px #999999;
        border-radius: 5px;
        z-index: 1000;
        background-color: #ffffff;
        border: #999999 solid 1px;
        padding-top: 60px;
    }

    .c-setting-panel-button {
        height: 35px;
        width: 35px;
        font-size: 8px;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        margin-left: 25px;
        margin-top: 20px;
        background-color: rgb(58, 91, 178);
        color: #ffffff;
        cursor: pointer;
        z-index: 1001;
        box-shadow: 0px 0px 8px #999999;
    }

    .c-setting-panel-button:hover {
        box-shadow: 0px 0px 20px #FFA20A;
        border: #ffffff solid 1px;
        color: #FFA20A;
        -moz-transform: rotate(-89deg) translateX(-190px);
        animation-timing-function: linear;
        animation: flashButton 2s infinite;
    }

    .c-fixedLayout {
        position: fixed;
        top: 125px
    }

    @keyframes flashButton {
        from {
            box-shadow: 0px 0px 8px rgb(46, 78, 143);
        }
        30% {
            box-shadow: 0px 0px 20px #FFA20A;
        }
        to {
            box-shadow: 0px 0px 8px rgb(46, 78, 143);
        }
    }

    .c-debug-tools-row {
        text-align: left;
    }

    /*****************************[Operate]****************************************/
    .rel-operate {
        pointer-events: none !important;
        position: absolute;top:0px;left:0px;width:100%;height: 100%;z-index: 180;
        .rel-node {
            cursor: move;
        }
    }
    .rel-selection {
        position: absolute;
        //background-color: rgba(14, 122, 123, 0.3);
        //border:rgba(14, 122, 123, 1) solid 1px;
        position: absolute;
        background-color: rgba(214, 3, 246, 0.2);
        border:rgba(214, 3, 246, 1) solid 1px;
    }
    .rel-graph-loading{
        position: absolute;
        z-index: 1600;
        left:0px;
        top:0px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        @keyframes turn {
            0% {
                -webkit-transform: rotate(0deg);
            }
            25% {
                -webkit-transform: rotate(90deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            75% {
                -webkit-transform: rotate(270deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        .c-graph-loading-icon {
            width: 16px;
            height: 16px;
            vertical-align: -3px;
            fill: currentColor;
            overflow: hidden;
            animation: turn 1s linear infinite;
        }
        .rel-graph-loading-message{
            //display: none;
            position: absolute;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            left: calc((100% - 200px) / 2);
            top: calc((100% - 30px) / 2);
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #ffffff;
            display: flex;
            place-items: center;
            justify-content: center;
            gap: 8px;
        }
    }
    .rel-graph-loading-hide{
        //animation: slowHide 0.5s forwards;
        display: none;
    }
    @keyframes slowHide {
        from {opacity: 1;}
        to {opacity: 0;display: none;}
    }

    .rel-easy-view {
        overflow: visible;height: 100%;width:100%;background-color: transparent;position: absolute;left:0px;top:0px;
        canvas {
            opacity: 0;
            width: 100%;height: 100%;
        }
    }
    .rel-easy-view-active {
        //background-color: rgba(128,128,255,0.39);
        canvas {
            opacity: 1;
        }
    }
}
